<template>
  <a-drawer
    title=""
    placement="right"
    @close="onCloseLogs"
    width="400"
    :open="logShow"
    :z-index="20000"
  >

  <div>
    <a-empty v-if="instLogs.length==0" />
    <a-comment v-for="insLog in instLogs" :key="insLog.id">
      <template #author>
        <a>{{insLog.userName}}</a>
      </template>
      <template #avatar>
        <a-avatar
            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            :alt="insLog.userName"/>
      </template>
      <template #content>
        <p>
          {{insLog.opDescp}}
        </p>
      </template>
      <template #datetime>
        <a-tooltip :title="insLog.createTime">
          <span>{{insLog.createTime}}</span>
        </a-tooltip>
      </template>
    </a-comment>
  </div>
  </a-drawer>
</template>

<script>
    import BpmInstLogApi from "@/common/api/bpm/bpmInstLog";
    export default {
      name: "BpmInstLogs",
      emits:['update:logShow'],
      props:{
          instId:{//流程实例Id
            type:String,
            required:true
          },
          logShow:{
              type:Boolean,
              default:false
          }
      },
      data(){
        return {
          instLogs:[]
        }
      },
      methods:{
          onCloseLogs(){
              this.$emit('update:logShow', false)
          }
      },
      watch:{
            logShow:function (val) {
                if(val){
                    BpmInstLogApi.getByInstId(this.instId).then(resp=>{
                        this.instLogs=resp.data;
                    });
                }
            }
        }
    }
</script>

<style scoped>

</style>